<template>
  <div>
    <!-- 表单部分 -->
    <el-card>
      <el-form
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
        label-position="right"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="日志类型">
              <el-select
                v-model="searchForm.type"
                placeholder="请选择日志类型"
                clearable
                :style="selectWidth"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模块名称">
              <el-input
                v-model="searchForm.name"
                placeholder="请输入模块名称"
                clearable
                :style="selectWidth"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日志日期">
              <el-date-picker
                type="date"
                v-model="searchForm.time"
                placeholder="请选择日志日期"
                :style="selectWidth"
                value-format="YYYY-MM-DD"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="成功标志">
              <el-select
                v-model="searchForm.status"
                placeholder="请选择成功标志"
                clearable
                :style="selectWidth"
              >
                <el-option label="失败" value="0" />
                <el-option label="成功" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center">
          <el-col :span="24">
            <el-form-item>
              <el-button @click="onReset">重置</el-button>
              <el-button type="primary" @click="onSearch"
                ><el-icon><Search /></el-icon>搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格部分 -->
    <el-card style="margin-top: 10px">
      <div style="margin-bottom: 5px">
        <span class="delete_text">批量删除:</span>
        <el-date-picker
          v-model="yearDelete"
          type="date"
          placeholder="选择日期进行批量删除"
          value-format="YYYY-MM-DD"
          style="margin-right: 10px"
        />
        <el-button type="danger" plain :disabled="!yearDelete" @click="onDelete"
          ><el-icon><DeleteFilled /></el-icon>删除</el-button
        >
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="type" label="日志类型">
          <template #default="{ row }">
            <span>{{
              row.category == 4
                ? '接口交互日志'
                : row.category == 5
                ? '自动任务日志'
                : null
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="time"
          label="日志时间"
          sortable
          :sort-orders="['descending', 'ascending']"
        >
          <template #default="{ row }">
            <span>{{ dayjs(row.time).format('YYYY-MM-DD hh:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="日志内容"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column prop="moduleName" label="模块名称" />
        <el-table-column prop="flag" label="成功标志">
          <template #default="{ row }">
            <div
              :class="
                row.flag == '成功'
                  ? 'success'
                  : row.flag == '失败'
                  ? 'fail'
                  : null
              "
            >
              {{ row.flag }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作选项">
          <template #default="{ row }">
            <el-button
              link
              plain
              type="primary"
              size="small"
              @click="onPreview(row)"
              ><el-icon><View /></el-icon>内容详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        class="pagination_bottom"
        v-show="total > 0"
        v-model:current-page="queryParams.pageNo"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @change="handlePaginationChange"
        background
      />
    </el-card>
    <el-dialog v-model="addDialogVisible" :title="title" width="35%">
      <el-form>
        <el-form-item label="日志内容:">
          <el-input
            type="textarea"
            v-model="content"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false" type="primary"
            >关 闭</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script  setup>
import { ref, reactive } from 'vue'
import { getLogSystemList, systemDelete } from '@/api/log.js'
import { dayjs, ElMessage } from 'element-plus'
import { useStore } from 'vuex'

const addDialogVisible = ref(false)
const total = ref(0)
const title = ref('')
const content = ref('')
const selectWidth = ref('width:200px')
const yearDelete = ref('')
const store = useStore()
const userId = store.state.app.user.id
// 日志类型选项
const typeOptions = reactive([
  {
    value: '4',
    label: '接口交互日志'
  },
  {
    value: '5',
    label: '自动任务日志'
  }
])

// 搜索框
const searchForm = ref({
  type: '',
  name: '',
  time: '',
  status: ''
})
const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})
const tableData = ref([])

// 搜索
const onSearch = () => {
  getList()
}
// 批量删除
const onDelete = () => {
  console.log(yearDelete.value)
  console.log(userId)
  systemDelete({ date: yearDelete.value, userId }).then((res) => {
    if (res.success) {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
      getList()
    }
  })
}
// 重置
const onReset = () => {
  queryParams.value.pageNo = 1
  queryParams.value.pageSize = 10
  searchForm.value.type = ''
  searchForm.value.name = ''
  searchForm.value.time = ''
  searchForm.value.status = ''
  getList()
}
// 查看
const onPreview = (row) => {
  content.value = row.content
  title.value = '日志内容详情'
  addDialogVisible.value = true
}
// 初始化
const getList = () => {
  const search = {
    queryCategory: searchForm.value.type,
    queryModulename: searchForm.value.name,
    queryDate: searchForm.value.time,
    queryFlag:
      searchForm.value.status === '0'
        ? '失败'
        : searchForm.value.status === '1'
        ? '成功'
        : ''
  }
  getLogSystemList({ ...search, ...queryParams.value }).then((res) => {
    tableData.value = res.data.list
    total.value = res.data.total
  })
}
// 分页
const handlePaginationChange = (currentPage, pageSize) => {
  queryParams.value.pageNo = currentPage
  queryParams.value.pageSize = pageSize
  getList()
}
getList()
</script>

<style lang="scss" scoped>
::v-deep {
  .el-table {
    .el-table__header-wrapper {
      th {
        word-break: break-word;
        background-color: #f8f8f9 !important;
        color: #515a6e;
        height: 40px !important;
        font-size: 13px;
      }
    }
  }
}
::v-deep {
  .el-form {
    .el-form-item {
      .el-form-item__label {
        font-weight: bold !important;
      }
    }
  }
}

::v-deep {
  .el-form {
    .el-form-item .second_label {
      .el-form-item__label {
        font-weight: normal !important;
        margin-top: 10px;
      }
    }
  }
}
::v-deep {
  .second_label {
    .el-form-item__error {
      position: static !important;
    }
  }
}
.pagination_bottom {
  margin-top: 15px;
  margin-bottom: 15px;
  float: right;
}
.delete_text {
  align-items: flex-start;
  box-sizing: border-box;
  color: #606266;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 14px;
  height: 32px;
  justify-content: flex-end;
  line-height: 32px;
  padding: 0 12px 0 0;
  font-weight: 600;
}
.success {
  width: 40px;
  background: rgb(224.6, 242.8, 215.6);
  text-align: center;
  border-radius: 4px;
  color: #67c23a;
}
.fail {
  width: 40px;
  background: rgb(252, 210.9, 210.9);
  text-align: center;
  border-radius: 4px;
  color: #f56c6c;
}
</style>
